<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>随机点名器</title>
		<style>
			#div {
				width: 100px;
				height: 100px;
				background-color: aqua;
				position: relative;
			}

			#but {
				width: 100px;
				background-color: chartreuse;
			}

			#sp {
				color: coral;
				position: absolute;
				left: 25px;

			}

			#ap {
				color: red;
				position: absolute;
				left: 25px;
				bottom: 10px;
			}

			#p1 {
				color: beige;
				font-size: 1px;
				position: absolute;
				left: 25px;
				bottom: 40px;
			}
		</style>
		<script>
			var nameArr = ["王海波", "蒋慎斌", "汤舒青", "翟坤", "黄维", "李亚洲", "朱重八", "陈圆圆"];
			var index = 0;
			var timer;

			function act() {
				//document.getElementById("but").disabled = "true";
				var sp = document.getElementById("sp");
				var but = document.getElementById("but");
				var ap = document.getElementById("ap");
				//clearInterval(timer);
				if (but.innerHTML == "开始") {
					timer = setInterval(function() {
							index = parseInt((Math.random() * nameArr.length));
							sp.innerHTML = nameArr[index];
							but.innerHTML = "结束";
						},
						100);
				};
				if (but.innerHTML == "结束") {
					but.innerHTML = "开始";
					clearInterval(timer);
					var num = nameArr.indexOf(sp.innerHTML);
					nameArr.splice(num, 1);
				}
				ap.innerHTML = sp.innerHTML;
				console.log(nameArr.join(","))

			 }
		</script>
	</head>
	<body>

		<div id="div">
			<span id="sp"></span>
			<p id="p1">中奖人</p>
			<span id="ap">&nbsp;</span>
		</div>
		<button id="but" onclick="act()">开始</button>
	</body>
</html>
